<!--
 * @Description: 树形
 * @Author: zhailei
 * @Date: 2021-01-18 15:17:27
 * @LastEditTime: 2021-09-09 13:50:54
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\components\TopVUI\custom\ZTree.vue
-->
<template>
  <a-tree
    v-if="data.length"
    :load-data="onLoadData"
    :tree-data="data"
    @select="selectTree"
    :default-expand-all="expandAll"
    :show-icon="showIcon"
    :replaceFields="replaceFields"
    :selected-keys="selectedKeys"
  >
    <template slot="title" slot-scope="{ title, iconCls }">
      <span :title="title">
        <icon-fonts
          :icon="'icon-' + iconCls"
          type="small"
          v-if="iconCls"
          style="margin-right:5px"
        >
        </icon-fonts>
        {{ title }}
      </span>
    </template>
    <template :slot="slot" v-for="slot in slots">
      <slot :name="slot"></slot>
    </template>
  </a-tree>
</template>

<script>
export default {
  name: "projectTree",
  props: {
    url: Object,
    parameter: Object,
    showIcon: Boolean,
    loadAll: false,
    treeText: {
      type: String,
      default: "text",
    },
    masterMust: {
      type: Boolean,
      default: true,
    },
    //是否全部展开
    expandAll: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      data: [],
      originalData: [],
      replaceFields: {
        children: "children",
        title: this.treeText,
        key: "id",
      },
      selectedKeys: [],
    };
  },
  created() {
    this.getListByLevelId();
  },
  computed: {
    slots() {
      return Object.keys(this.$slots).filter((slot) => slot !== "title");
    },
  },
  methods: {
    getListData() {
      return this.data;
    },
    handleTreeData(arr) {
      if (arr.length) {
        arr.forEach((item) => {
          item.iconCls = "connections";
          item.title = item[this.treeText];
          this.$set(item, "isLeaf", !item.hasChild);
          this.handleTreeData(item.children);
        });
      }
    },
    // 获取父级
    getListByLevelId() {
      const that = this;
      that.$post(that.url.fathersUrl, that.parameter.father).then((res) => {
        let arr = [];
        if (this.loadAll) {
          arr = res.data;
          that.handleTreeData(arr);
        } else {
          res.forEach(function(item, index) {
            item.title = item[that.treeText];
            item.label = item[that.treeText];
            item.index = index;
            item.key = item.id;
            item.levelId = item.levelId;
            item.slots = { icon: "meh" };
            if (item.state === "open") {
              item.isLeaf = true;
            }
            arr.push({
              ...item,
              children: item.state === "closed" ? [] : "",
            });
          });
        }
        if (arr.length > 0) {
          that.selectedKeys = [arr?.[0].id];
        }
        that.data = arr;
        this.$emit("chengTreeData", arr);
        that.originalData = arr;
      });
    },
    // 加载树形子级数据
    onLoadData(treeNode) {
      return new Promise((resolve) => {
        // 判断是否有子级
        let parameter = this.parameter.children;
        parameter.pid = treeNode.dataRef.id;
        this.$post(this.url.expandUrl, parameter)
          .then((res) => {
            let data = res?.data ?? [];
            data.forEach((e, index) => {
              data[index].iconCls = "connections";
              data[index].title = e[this.treeText];
              data[index].index = e[this.treeText];
              data[index].key = e.id;
              data[index].levelId = e.levelId;
            });
            treeNode.dataRef.children = data;
            this.data = [...this.data];
            resolve();
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    selectTree(value, node, extra) {
      let tree = node.node.dataRef;
      this.selectedKeys = [tree.id];
      this.$emit("rowClick", tree, value, extra);
    },
  },
};
</script>

<style></style>
